<template>
  <view :class="['content', current == 1 ? '' : 'on']">
    <u-sticky :h5NavHeight="0">
      <u-tabs
        active-color="#F0250E"
        :list="menu"
        :is-scroll="false"
        :current="current"
        @change="(e) => handle('change', e)"
        :height="90"
      ></u-tabs>
    </u-sticky>

    <pageTobeInvoiced
      v-if="!current"
      :items="list"
      @apply="apply"
      @check="check"
      @showMore="(e) => (list[e].showMore = !list[e].showMore)"
    ></pageTobeInvoiced>
    <pageRecord v-if="current == 1" :items="list"></pageRecord>
    <pageInfo ref="info" v-if="current == 2"></pageInfo>

    <toolsMore :status="moreStatus" v-if="current != 2"></toolsMore>

    <view class="tools-pof" v-if="!current">
      <view class="tools-pof-box BatchProcessing">
        <view class="let">
          <u-checkbox-group>
            <label class="label">
              <checkbox
                shape="circle"
                class="checkbox"
                :checked="isAll"
                color="#F60313"
                @click="handle('allChecked')"
              />
              <text>全选</text>
            </label>
          </u-checkbox-group>
        </view>

        <view class="rig">
          <!-- <view class="price">
            <view class="price-text">金额：</view>
            <view class="price-num">
              ¥
              <text>15</text>
              .80
            </view>
          </view> -->

          <view class="btn" @click="handle('all')">批量开票</view>
        </view>
      </view>
    </view>
    <view class="tools-pof" v-if="current == 2">
      <view class="tools-pof-box">
        <view class="btn submit" @click="submit">保存信息</view>
      </view>
    </view>
  </view>
</template>

<script>
import pageTobeInvoiced from "./components/page-tobeInvoiced.vue";
import pageRecord from "./components/page-record.vue";
import pageInfo from "./components/page-info.vue";
import toolsMore from "@/components/tools/tools-more.vue";
import { list, apply } from "@/api/invoice";

export default {
  components: {
    pageTobeInvoiced,
    pageRecord,
    toolsMore,
    pageInfo
  },

  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,

      isAll: false,
      menu: [
        { name: "待开票", id: 0 },
        { name: "开票历史", id: 1 },
        { name: "资质信息", id: 2 }
      ],
      current: 0
    };
  },

  computed: {},

  watch: {
    list: {
      handler(val) {
        if (val.every((el) => el.checked)) {
          this.isAll = true;
        } else {
          this.isAll = false;
        }
      },
      deep: true
    }
  },

  onLoad(opi) {
    if (opi.index) this.current = parseInt(opi.index);
    this.$utils.hideShareMenu();
  },

  onShow() {
    this.clearData();
  },

  methods: {
    check(i) {
      let el = this.list[i];
      el.checked = !el.checked;
    },

    handle(type, item) {
      switch (type) {
        case "change":
          this.current = item;

          if (item != 2) {
            this.clearData();
          }
          break;

        case "allChecked":
          this.isAll = !this.isAll;
          this.list.forEach((el) => {
            el.checked = this.isAll;
          });
          break;

        case "all":
          if (this.list.some((el) => el.checked)) {
            this.apply({
              id: this.list
                .filter((el) => el.checked)
                .map((el) => el.id)
                .join(",")
            });
          } else {
            this.$utils.toast("请至少选择一条数据");
          }
          break;

        default:
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      let { page, current } = this,
        params = {
          page
        };
      if (current == 0) params.has_apply = 0;
      this.moreStatus = 2;
      const res = await list(params);
      this.moreStatus = 1;

      if (!res.code) {
        let { list, totalCount } = res.data;

        if (list.length) {
          list.forEach((e) => {
            e.checked = false;
            e.showMore = false;
          });
        }
        this.list.push(...list);
        if (this.list.length >= totalCount) {
          this.isEnd = true;
          this.moreStatus = 3;
        } else {
          this.page += 1;
        }
      }
    },

    async apply(data) {
      const res = await apply(data, true);
      if (!res.code) {
        this.current = 1;
        this.clearData();
      }
      this.$utils.toast(res.msg);
    },

    submit() {
      this.$u.throttle(() => {
        this.$refs.info.submit();
      }, 1000);
    }
  },

  onReachBottom() {
    if (this.isEnd || this.current == 2) {
      return;
    }

    this.getList();
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;

  &.on {
    padding-bottom: 200rpx;
  }
}

.title {
  height: 66rpx;
  background: #fff;
}

.box {
  height: 200vh;
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}

.tools-pof-box {
  padding: 10rpx 24rpx;
  padding: 10rpx 24rpx calc(constant(safe-area-inset-bottom) + 10rpx);
  padding: 10rpx 24rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
}

.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
}

.BatchProcessing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96rpx;
  box-sizing: content-box;

  .let {
    font-size: 32rpx;
    color: #262626;
  }

  .rig {
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .price {
    display: flex;
    align-items: flex-end;
    font-size: 24rpx;
    color: #262626;
  }

  .price-num {
    font-size: 30rpx;
    font-weight: bold;
    line-height: 1;

    text {
      font-size: 40rpx;
      line-height: 1;
    }
  }

  .btn {
    margin-left: 24rpx;
    padding: 18rpx 24rpx;
    background: #f0250e;
    border-radius: 32px;
    color: #fff;
  }
}

::v-deep {
  .uni-checkbox-input {
    border-radius: 50%;
    transform: scale(0.8);
  }

  .uni-checkbox-input-checked {
    border-color: #f0250e !important;
    background: #f0250e;
    color: #fff !important;
  }

  // #ifdef  MP-WEIXIN
  checkbox .wx-checkbox-input {
    border-radius: 50% !important;
    color: #ffffff !important;
    transform: scale(0.8);
  }

  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background: #f0250e;
    border-color: #f0250e !important;
  }
  // #endif

  // #ifdef  MP-ALIPAY
  .checkbox {
    border: 0;
    margin-right: 20rpx;
  }

  .label {
    display: flex;
    align-items: center;
  }

  .checkbox::before {
    content: "";
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  checkbox-checked::before {
    width: 40rpx;
    height: 40rpx;
    background: #f0250e;
    border: none;
  }
  // #endif
}
</style>
